<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="form.programme_title" placeholder="请输入方案名称" clearable @keyup.enter.native="searchBtn" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.base_category" placeholder="请输入类别名称" clearable @keyup.enter.native="searchBtn" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.status" placeholder="状态" style="width: 120px" size="small">
                        <el-option value="1" label="启用"></el-option>
                        <el-option value="0" label="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" @click="openAddBtn" size="small" :loading="addLoading"
                               :disabled="nodeActions.indexOf('add')<0">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading">
                <el-table-column type="index" label="序号" width="90"></el-table-column>
                <el-table-column label="方案名称" prop="programme_title" width="200"></el-table-column>
                <el-table-column label="部位" prop="position_data">
                    <template slot-scope="{ row }">
                        <el-popover placement="right-start" width="200" trigger="hover">
                            <el-row>
                                <el-tag v-for="(item,index) in row.position_data" :key="index" size="mini" style="margin: 0 4px 4px 0;">
                                    {{item.position_title}}
                                </el-tag>
                            </el-row>
                            <div slot="reference" class="ellipsis">
                                <el-tag v-for="(item,index) in row.position_data" :key="index" size="mini" style="margin: 0 4px 4px 0;">
                                    {{item.position_title}}
                                </el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="类别" prop="base_category" width="200"></el-table-column>
                <el-table-column prop="base_status" label="当前状态" width="120">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#13ce66" :active-value=1 :inactive-value=0
                                   @change="changStatus(scope.$index, scope.row.status)" :disabled="nodeActions.indexOf('edit')<0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="openEditBtn(scope.$index, scope.row)" :loading="scope.$index==selectIndex && editLoading"
                                   :disabled="nodeActions.indexOf('edit')<0">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--新增、编辑-->
        <el-drawer :title="editTitle" :visible.sync="editVisible" size="700px" direction="rtl" :wrapperClosable="false">
            <el-row style="padding: 0 0 10px 10px;">
                <el-col :span="24">
                    <div>
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">基本信息</span>
                    </div>
                    <el-form :model="editForm" label-position="right" label-width="120px" :rules="rules">
                        <el-form-item label="方案名称：" prop="programme_title">
                            <el-input size="small" v-model.trim="editForm.programme_title" placeholder="请输入方案名称" style="width: 80%" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="服装类别：" prop="base_category_id">
                            <el-select size="small" v-model="editForm.base_category_id" placeholder="请选择服装类别" style="width: 80%" @change="changeCategoryBtn">
                                <el-option v-for="(title, id) in basecodes" :key="id" :label="title" :value="id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row style="padding: 0 0 10px 10px;">
                <el-col :span="24">
                    <div>
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">部位信息</span>
                        <el-button type="text" class="el-icon-circle-plus-outline" style="color: #409eff; font-size: 24px; margin-left: 10px"
                                   @click="addPositionBtn"></el-button>
                    </div>
                    <el-col :span="24" style="overflow-y:auto;" :style="{'height': drawerTableHeight}">
                        <el-form label-position="right" label-width="100px">
                            <el-form-item v-for="(item,index) in editPositionData" :key="index" :label="('部位'+(index+1)+'：')">
                                <el-select size="small" v-model="editPositionData[index].id" placeholder="请输入部位名称" style="width: 35%" filterable remote
                                           :remote-method="searchPositionBtn" @change="changePositionBtn($event, index)">
                                    <el-option v-for="(position,index) in positionList" :key="index" :label="position.position_title" :value="position.id"></el-option>
                                </el-select>
                                <span style="margin: 0 8px;">-</span>
                                <el-input size="small" v-model="editPositionData[index].position_method" style="width: 40%" placeholder="测量方法" clearable></el-input>
                                <el-button type="text" class="el-icon-delete" style="margin-left: 8px;" @click="delPositionBtn(index)"></el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-col>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button @click="editVisible=false">取 消</el-button>
                <el-button type="primary" @click="saveBtn" :loading="saveLoading">{{ saveLoading ? '提交中 ...' : '保 存' }}</el-button>
            </div>
        </el-drawer>
    </section>
</template>

<script>
import {planStatus, planList, basecodeList, positionList, positionSearch, planSave} from "@/api/bs/base";

export default {
    name: "basePlan",
    props:{
        nodeActions: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            tableHeight: window.innerHeight - 284,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],

            form: {
                status: "1",
                programme_title: "",
                base_category: ""
            },

            rules: {
                programme_title: [{ required: true, message: '请输入方案名称', trigger: 'change' }],
                base_category_id: [{ required: true, message: '请输入服装类别', trigger: 'change' }],
            },

            drawerTableHeight: window.innerHeight - 340+"px",
            editVisible: false,
            saveLoading: false,
            editLoading: false,
            addLoading: false,
            editTitle: "修改方案",
            editForm: {},
            editPositionData: [],
            searchPositionLoading: false,

            basecodes: {},
            positionList: [],
        }
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                status: this.form.status
            };
            if(this.form.programme_title){
                param.programme_title = this.form.programme_title;
            }
            if(this.form.base_category){
                param.base_category = this.form.base_category;
            }
            this.loading = true;
            planList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },

        //保存按钮
        saveBtn(){
            let obj = Object.assign({}, this.editForm)
            obj.position_data = this.editPositionData;
            console.log(obj)
            if(!obj.base_category_id || !obj.programme_title || obj.position_data.length == 0){
                this.$message.warning("保存内容不能为空");
                return;
            }
            let isWarn = false;
            obj.position_data.map(item=>{
               if(item.id==""){
                   isWarn = true;
               }
            });
            if(isWarn){
                this.$message.warning("部位信息, 内容不能为空");
                return;
            }
            this.saveLoading = true;
            planSave({data: JSON.stringify(obj)}).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("保存成功");
                    this.editVisible = false;
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch((res)=>{
                this.saveLoading = false;
            })
        },
        //修改状态
        changStatus(index, value){
            let msg = value ? "启用" : "禁用"
            this.$confirm("是否"+msg+"，请确认！！！", '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: value ? 'success' : 'warning'
            }).then(() => {
                let param = {
                    id: this.data[index].id,
                    status: value
                };
                planStatus(param).then((res) => {
                    if(res.code === 0){
                        this.$message.success(msg+"成功");
                    }else{
                        this.$message.error(res.msg);
                        this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                    }
                }).catch(()=>{
                    this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                });
            }).catch(() => {
                this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                this.$message.info("操作已取消");
            });
        },
        //修改服装类别
        changeCategoryBtn(id){
            this.$set(this.editForm, 'base_category', this.basecodes[id]);
        },
        //打开编辑
        async openEditBtn(index, row){
            this.selectIndex = index;
            this.editLoading = true;
            this.editTitle = "修改方案";
            this.editForm = JSON.parse(JSON.stringify(row));
            this.editPositionData = JSON.parse(JSON.stringify(row.position_data));
            console.log(this.editPositionData)
            this.loadCodons();
            let res = await this.loadPositions();
            this.positionList = JSON.parse(JSON.stringify(res));
            this.editLoading = false;
            this.editVisible = true;
        },
        //打开新增
        async openAddBtn(){
            this.editTitle = "新增方案";
            this.addLoading = true;
            this.editForm = {};
            this.editPositionData = [];
            this.loadCodons();
            let res = await this.loadPositions();
            this.positionList = JSON.parse(JSON.stringify(res));
            console.log(this.editPositionData)
            this.addLoading = false;
            this.editVisible = true;
        },
        //搜索部位信息
        searchPositionBtn(query){
            if(query == ""){
                return;
            }
            positionSearch({title: query}).then((res) => {
                if(res.data.data.length == 0){
                    this.$message.warning("搜索内容不存在!");
                    return;
                }
                let list = [];
                let ids = [];
                for(let i=0;i<res.data.data.length;i++){
                    let item = res.data.data[i];
                    list.push(item);
                    ids.push(item.id);
                }
                for(let i=0;i<this.editPositionData.length;i++){
                    if(ids.indexOf(this.editPositionData[i].id) >= 0 || !this.editPositionData[i].id){
                        continue;
                    }
                    list.push(this.editPositionData[i]);
                }
                console.log(list)
                this.positionList = list;
            });
        },
        //修改部位信息
        changePositionBtn(event, index){
            this.positionList.map(item=>{
                if(item.id == event){
                    this.$set(this.editPositionData[index], 'position_title', item.position_title);
                }
            })
        },
        //新增部位信息
        addPositionBtn(){
            let obj = {id: "", position_title: "", position_method: ""};
            this.editPositionData.push(obj);
        },
        //删除部位信息
        delPositionBtn(index){
            this.editPositionData.splice(index,1);
        },
        //加载服装类别信息
        loadCodons(){
            if(Object.keys(this.basecodes).length == 0){
                let param = {page: 1, limit: 1000, status: 1};
                basecodeList(param).then((res)=>{
                    res.data.data.map((item) =>{
                        this.$set(this.basecodes, item.id, item.base_category);
                    })
                })
            }
        },
        //加载部位信息
        async loadPositions(){
            let ids = [];
            for(let item of this.editPositionData){
                ids.push(item.id);
            }
            let param = {page: 1, limit: 20, status: 1, ids: ids};
            return await positionList(param).then((res) => res.data.data);
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
